<template>
  <v-data-table
    :value="qualitySelected"
    :headers="headers"
    :items="qualityItems"
    :options.sync="options"
    :server-items-length="total"
    :search="search"
    :loading="loading"
    :footer-props="{
      showFirstLastPage: true,
      'items-per-page-options': [10, 20, 50, 100, 200, 500, 1000]
    }"
    item-key="documentId"
    loading-text="Loading... Please wait"
    show-select
    @input="updateQualitySelected"
  >
    <template v-slot:top>
      <v-text-field
        v-model="search"
        prepend-inner-icon="search"
        label="搜索"
        single-line
        hide-details
        filled
      />
    </template>
    <!-- <template v-slot:item.text="{ item }">
      <v-edit-dialog>
        <span class="d-flex d-sm-none">{{ item.text | truncate(50) }}</span>
        <span class="d-none d-sm-flex">{{ item.text | truncate(200) }}</span>
        <template v-slot:input>
          <v-textarea
            :value="item.text"
            label="Edit"
            autofocus
            @change="handleUpdateDocument({ id: item.id, text: $event })"
          />
        </template>
      </v-edit-dialog>
    </template> -->
    <template v-slot:item.deliverable="{ item }">
      <span
        class="spanObj"
        v-for="(i, index) in item.markedList"
        :key="index"
        :class="{ 'highlight bottom': i.color !== '' }"
        :style="{ borderColor: i.color !== '' ? i.color : '' }"
      >
        <span class="highlight__content">{{ i.text }}</span>
        <span
          :data-label="i.marked"
          :style="{ backgroundColor: i.color, color: i.Color }"
          class="highlight__label"
        />
      </span>
    </template>
    <template v-slot:item.slotFlag="{ item }">
      <span :class="{ activeColor: item.slotFlag !== 1 }">{{
        item.slotFlag === 1 ? '有' : '无'
      }}</span>
    </template>
    <template v-slot:item.action="{ item }">
      <v-btn small color="primary text-capitalize" @click="toLabeling(item)">
        质检标注
      </v-btn>
    </template>
  </v-data-table>
</template>
<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
export default {
  props: {
    queryItem: {
      type: Array,
      default: () => []
    },
    startTimeData: {
      type: Array,
      default: () => []
    },
    refreshData: {
      type: Array,
      default: () => []
    }
  },
  async fetch() {
    await this.getQualityItems({
      projectId: this.$route.params.id,
      ...this.$route.query,
      startTime: this.queryItem[0],
      endTime: this.queryItem[1],
      qualityStatus: this.queryItem[2]
    })
  },

  data() {
    return {
      search: '',
      options: {},
      data: [],
      item: this.queryItem[2],
      headers: [
        {
          text: '文本',
          align: 'left',
          value: 'document',
          sortable: false
        },
        {
          text: '分类标签',
          align: 'center',
          value: 'intent',
          sortable: false
        },
        {
          text: '槽位',
          align: 'left',
          value: 'slotFlag',
          sortable: false
        },
        {
          text: '成果物',
          align: 'left',
          value: 'deliverable',
          sortable: false
        },
        {
          text: '标注者',
          align: 'center',
          value: 'userName',
          sortable: false
        },
        {
          text: '标注时间',
          align: 'center',
          value: 'updateTime',
          sortable: false
        },
        {
          text: '操作',
          align: 'center',
          value: 'action',
          sortable: false
        }
      ]
    }
  },
  computed: {
    ...mapState('documents', [
      'items',
      'qualityItems',
      'qualitySelected',
      'loading',
      'total'
    ]),
    ...mapGetters('projects', ['getLink'])
  },

  watch: {
    qualitySelected(val, oldval) {},
    startTimeData: {
      handler(val) {
        console.log(val)
        this.data = val
      }
    },
    refreshData: {
      handler(val) {
        console.log(val)
        this.data = val
      }
    },
    // '$route.query': '$fetch',
    // options: {
    //   handler(newvalue, oldvalue) {
    //     console.log(this.queryItem)
    //     this.$router.push({
    //       query: {
    //         limit: this.options.itemsPerPage,
    //         offset: this.queryItem[2] !== this.queryItem[3] ? 0 : ((this.options.page - 1) * this.options.itemsPerPage),
    //         q: this.search,
    //         qualityStatus: this.queryItem[2] ?? null,
    //         startTime: this.queryItem[0] ?? null,
    //         endTime: this.queryItem[1] ?? null
    //       }
    //     })
    //     console.log(this.$route.query.offset)
    //   },
    //   deep: true
    // },
    '$route.query': '$fetch',
    options: {
      handler(newvalue, oldvalue) {
        this.$router.push({
          query: {
            limit: this.options.itemsPerPage,
            offset: (this.options.page - 1) * this.options.itemsPerPage,
            q: this.search
          }
        })
      },
      deep: true
    },
    search(newValue) {
      // 2021.8.30 添加 互相转换 监听 search参数
      console.log(newValue)
      this.$emit('searchData', newValue)
      this.$router.push({
        query: {
          limit: this.options.itemsPerPage,
          offset: 0,
          q: this.search
        }
      })
      this.options.page = 1
    }
  },

  methods: {
    ...mapActions('documents', [
      'getDocumentList',
      'getQualityItems',
      'updateDocument'
    ]),
    ...mapMutations('documents', ['updateQualitySelected']),

    handleUpdateDocument(payload) {
      const data = {
        projectId: this.$route.params.id,
        ...payload
      }
      this.updateDocument(data)
    },

    toLabeling(doc) {
      console.log(doc)
      const index = this.qualityItems.findIndex(
        item => item.documentId === doc.documentId
      )
      sessionStorage.setItem('currentUserId', JSON.stringify(doc.userId))
      console.log(index)
      const offset = (this.options.page - 1) * this.options.itemsPerPage
      console.log(offset)
      const page = doc.page
      // page = 50
      this.$router.push({
        path: `/projects/${this.$route.params.id}/${this.getLink}`,
        query: {
          page,
          q: this.search
        }
      })
    }
  }
}
</script>
<style scoped>
.activeColor {
  color: rgb(228, 57, 57);
}
.highlight.blue {
  background: #edf4fa !important;
}
.highlight.bottom {
  /* display: block; */
  white-space: normal;
}
.highlight:first-child {
  margin-left: 0;
}
.highlight {
  /* display: flex; */
  /* flex-direction: row; */
  width: 50px;
  border: 2px solid;
  margin: 4px 6px 4px 3px;
  vertical-align: middle;
  box-shadow: 2px 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  cursor: default;
  min-width: 26px;
  line-height: 22px;
  /* display: flex; */
}
.highlight .delete {
  top: -15px;
  left: -13px;
  position: absolute;
  display: none;
}
.highlight:hover .delete {
  display: block;
}
.highlight__content {
  /* display: flex; */
  /* flex-wrap: wrap; */
  /* align-items: center; */
  padding: 2px 2px 0px 6px;
}
.highlight.bottom .highlight__content:after {
  content: ' ';
  padding-right: 3px;
}
.highlight__label {
  line-height: 14px;
  padding-top: 1px;
  align-items: center;
  justify-content: center;
  /* display: flex; */
  padding: 0 8px;
  /* text-align: center; */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: white;
}
.highlight__label::after {
  content: attr(data-label);
  /* display: block; */
  font-size: 14px;
  -webkit-font-smoothing: subpixel-antialiased;
  letter-spacing: 0.1em;
}
.newline {
  width: 100%;
}
</style>
